<script setup lang="ts">
import { App } from "./models/app";
import Dynamic from "@/components/Dynamic.vue";
import Box from "@/components/Box.vue";
import { provide, onErrorCaptured, ref, reactive, watch } from "vue";
import { initServices } from "@/services";
import * as injectKeys from "@/services/injectKeys";
import { scalePage } from "@/core/pageAutoScale";
import { useStyleTag } from "@vueuse/core";

// import DatasetPane from "@/components/DatasetPane.vue";

const props = defineProps<{ app: App }>();

// scalePage();

const app = props.app;

document.title = app.docTitle ?? "pybi-next";
console.log(`pybi-next:[${app.version}]`);

app.styleTags?.forEach((st) => {
  useStyleTag(st.css, { id: st.id, media: st.media });
});

onErrorCaptured((err, ins, info) => {
  console.log("test:", err);

  return false;
});

const init_info = reactive({
  isReady: false,
  errorInfo: null as Error | null,
});

try {
  const services = initServices(app);

  provide(injectKeys.sqlAnalyzeKey, services.sqlServices);
  provide(injectKeys.componentKey, services.cpServices);
  provide(injectKeys.datasetKey, services.datasetServices);
  provide(injectKeys.dbKey, services.dbServices);
  provide(injectKeys.utilsKey, services.utilsServices);
  provide(injectKeys.reactdataServicesKey, services.reactdataServices);
  provide(injectKeys.webResourcesServiceKey, services.webResourcesServices);
  provide(injectKeys.dynamicComponentKey, Dynamic);
  provide(injectKeys.actionsServiceKey, services.actionsServices);
  provide(injectKeys.appEventServiceKey, services.appEventServices);
  provide(injectKeys.componentInfosServiceKey, services.componentInfosServices);
  provide(injectKeys.metaInfoKey, { version: app.version });
  provide(injectKeys.imgServiceKey, services.imgServices);

  services.actionsServices.register(
    "app",
    "reset_filters",
    services.appEventServices.resetFilters
  );

  watch(services.dbServices.isReady, (value) => {
    init_info.isReady = value;
  });
} catch (error) {
  console.error(error);

  init_info.errorInfo = error;
  init_info.isReady = true;
}
</script>

<template>
  <q-layout view="hHh Lpr lff" container style="min-height: 100vh">
    <div v-if="!init_info.isReady" style="display: flex; height: 100vh">
      <p style="margin: auto">加载中</p>
    </div>

    <div class="pybi-appInit-error" v-else-if="init_info.errorInfo">
      <div class="box">
        <header>Error({{ init_info.errorInfo.name }})</header>

        <p class="message">{{ init_info.errorInfo.message }}</p>
        <p class="suggestion" v-if="init_info.errorInfo.suggestion">
          {{ init_info.errorInfo.suggestion }}
        </p>
      </div>
    </div>

    <q-page-container v-else>
      <q-page>
        <Box class="app-box" :model="app"></Box>
      </q-page>
    </q-page-container>

    <qs-sizebar
      v-if="app.sizebar && !init_info.errorInfo"
      :model="app.sizebar"
    ></qs-sizebar>
  </q-layout>

  <span class="pybi-tooltip"></span>
</template>

<style scoped lang="less">
html {
  font-size: 1.1115vw;
}

.app-box {
  padding-left: 2rem;
  padding-right: 2rem;
  min-height: 100vh;
  padding-bottom: 0.8rem;
  padding-top: 0.8rem;
}

.pybi-appInit-error {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  width: 100vw;
  height: 100vh;

  .box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: rgb(222, 7, 7);
    border: 1px solid red;
    color: whitesmoke;
    padding: 1rem;

    header {
      font-size: 1.5rem;
    }
  }
}
</style>
